<template>
  <div>
    <div class="btn_img" @click="hOpenDialog">
      <img :src="coverImageUrl" alt="">
      <!-- <img src="../assets/default.png" alt=""> -->
    </div>
     <el-dialog
      append-to-body
      :visible.sync="dialogVisible">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="素材库" name="first">
            <!-- 全部和收藏部分 -->
            <el-radio-group v-model="isCollected" style="margin-bottom: 30px;" @change="hToggle">
              <el-radio-button :label="false">全部</el-radio-button>
              <el-radio-button :label="true">收藏</el-radio-button>
            </el-radio-group>
             <!-- 图片素材区域 -->
            <!-- 素材列表 -->
            <el-row :gutter="10" class="img_list">
              <el-col
                v-for="image in images"
                :key="image.id"
                class="img_item" :xs="12" :sm="6" :md="6" :lg="4"
                :class="{selected : image.url===selectedImageUrl}"
                @click.native="hSelectedImage(image.url)">
                <el-image
                  style="height: 100px;"
                  :src="image.url"
                  fit="cover"></el-image>
              </el-col>
            </el-row>
            <!-- /素材列表 -->
            <!-- 分页部分 -->
            <el-pagination
              background
              layout="prev, pager, next"
              :total="totalCount"
              @current-change="hPageChange"
              >
            </el-pagination>
          </el-tab-pane>
            <el-tab-pane label="上传图片" name="upload">
            <!--
      - action： 必选参数，上传的地址：http://ttapi.research.itcast.cn/mp/v1_0/user/images
      - headers: 设置上传的请求头部。要携带token
      - name：上传的文件字段名。要与接口中要求保持一致。
      - show-file-list： 是否显示已上传文件列表
      - on-success：文件上传成功时的钩子。`function(response, file, fileList)`
      - before-upload: 上传之前对文件进行检测。 -->
           <el-upload
          class="avatar-uploader"
          action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
          :headers="headers"
          name="image"
          :show-file-list="false"
          :on-success="hAvatarSuccess"
          :before-upload="beforeAvatarUpload">
            <!-- img用来显示上传成功之后的图像 -->
        <el-image v-if="uploadImageUrl" :src="uploadImageUrl" class="avatar" />
        <!-- 显示引导用户上传的 那个 + 号 -->
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
          </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="hConfirm">确 定</el-button>
        </span>
      </el-dialog>
  </div>

</template>

<script>
// 引入需要显示的额默认封面图片
import defaultImg from '@/assets/default.png'
export default {
  name: 'cover',
  props: ['value'],
  data () {
    return {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('tokenStr')}`
      },
      dialogVisible: false, // 默认无弹框
      activeName: 'first',
      imageUrl: '',
      uploadImageUrl: '', // 上传成功之后的预览图片地址
      selectedImageUrl: '', // 被选中对的图片的url
      coverImageUrl: this.value || defaultImg, // 封面图片的地址
      // 分页添加数据,总条数和当前页面
      totalCount: 0,
      curPage: 1,
      images: [],
      isCollected: false
    }
  },
  methods: {
    // 点击图片按钮弹层打开
    hOpenDialog () {
      this.dialogVisible = true
      this.uploadImageUrl = '' //  清空上传图片的地址
      this.selectedImageUrl = '' // 清空被选中的图片地址
      this.loadImages()
    },
    handleClick () {

    },
    hToggle () {
      // 1.更新页面为1
      this.curPage = 1
      // 2.重新发送请求
      this.loadImages()
    },
    // 页面一打开就发送请求获取图片
    async loadImages () {
      try {
        const res = await this.$http({
          method: 'GET',
          url: '/mp/v1_0/user/images',
          params: {
            per_page: 10, // 每页展示的数据
            collect: this.isCollected,
            page: this.curPage
          }
        })
        console.log(res)
        // 更新总条数
        this.totalCount = res.data.data.total_count
        this.images = res.data.data.results
      } catch (err) {
        console.log(err)
      }
    },
    // 页面修改，默认传入参数为当前页面
    hPageChange (CurPage) {
      // 1.更新当前页面
      this.curPage = CurPage
      // 2.重新发送请求，渲染页面
      this.loadImages()
    },
    // 上传图片成功提示
    hAvatarSuccess (res, file) {
      // 1.查看效果
      // console.log('上传图片请求的结果', res)
      this.uploadImageUrl = res.data.url
      // 2. 上传成功提示
      this.$message.success('图片上传成功')
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // // 图片预览效果
    // hpreviewImageload () {
    //   // 3. 成功上传消息提示
    //   this.$message.success('素材已上传成功')
    // },
    // 点击选中图片
    hSelectedImage (url) {
      this.selectedImageUrl = url
    },
    // 点击确认按钮
    hConfirm () {
      if (this.activeName === 'first') {
        if (this.selectedImageUrl) {
          this.coverImageUrl = this.selectedImageUrl
        } else {
          this.$message.error('请先选中一张图片')
          return
        }
      } else {
        if (this.uploadImageUrl) {
          this.coverImageUrl = this.uploadImageUrl
        } else {
          this.$message.error('请先上传一张图片')
          return
        }
      }
      // 关闭弹窗
      this.dialogVisible = false
      // 抛出input事件，传递封面地址
      this.$emit('input', this.coverImageUrl)
    }
  }
}
</script>
<style scoped lang='less'>
// 图片按钮
.btn_img {
  cursor: pointer;
  width: 150px;
  height: 150px;
  border: 1px dashed #ddd;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.img_item {
  position: relative;
  box-sizing: border-box;
}
.option {
  position: absolute;
  left: 5px;
  width:180px;
  bottom: 5px;
  height: 30px;
  line-height: 30px;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  color: #fff;
  span {
    margin: 0 30px;
    cursor: pointer;
  }
}
.avatar{
  width: 300px;
}
.avatar-uploader {
    text-align: center;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar-uploader /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.selected::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3) url(../assets/selected.png) no-repeat center / 50px 50px;
  }
// 素材列表
  .img_item{
   position: relative;
  }
</style>
